<template>
  <div class="container">
    <el-button @click="addAccount" type="primary" size="small" class="btn">新增账号</el-button>
    <el-table
      :data="tableData"
      style="width:100%"
      max-height="720"
      class="shop_table_list"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column prop="account" label="账号"></el-table-column>
      <el-table-column prop="last_time_text" label="最近登录时间"></el-table-column>
      <el-table-column prop="time" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="openDialog(scope.row.id)" style="margin-right:10px">修改密码</el-button>
          <!-- <el-button type="primary" size="mini" @click="resetPassword(scope.row.id)">重置密码</el-button> -->
          <el-popconfirm
            title="确认要将密码重置为123456 ?"
            @onConfirm="resetPassword(scope.row.id)"
          >
            <el-button slot="reference" type="primary" size="mini">重置密码</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="15"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>
    <el-dialog
      title="修改密码"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
      @closed="cancel"
    >
      <el-form
        :model="formData"
        :rules="rules"
        ref="form"
        label-width="100px"
      >
        <el-form-item label="旧密码" prop="old_password">
          <el-input v-model="formData.old_password" placeholder="请输入旧密码" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="new_password">
          <el-input v-model="formData.new_password" placeholder="请输入新密码" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirm_new_password">
          <el-input v-model="formData.confirm_new_password" placeholder="确认新密码" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">修改密码</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { adminList, resetAdmin, updateAdmin } from '@/api/others'
export default {
  data() {
    return {
      tableData: [],
      form: {
        page: 1
      },
      total: 0,
      dialogVisible: false,
      rules: {
        old_password: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
        ],
        new_password: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 8, message: '密码至少为8个字符', trigger: 'blur' }
        ],
        confirm_new_password: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { validator: this.checkConfirmPassword, trigger: 'blur' }
        ]
      },
      formData: {
        id: '',
        old_password: '',
        new_password: '',
        confirm_new_password: ''
      }
    }
  },
  mounted() {
    this.getAdminList()
  },
  methods: {
    tc() {
        return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
        return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    cancel() {
      this.dialogVisible = false
      this.$refs['form'].clearValidate()
      this.formData = {
        old_password: '',
        new_password: '',
        confirm_new_password: ''
      }
    },
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          updateAdmin(this.formData).then(res => {
            console.log(res)
            if (res.code === 10000) {
              this.$message.success('修改成功')
              this.formData = {
                old_password: '',
                new_password: '',
                confirm_new_password: ''
              }
              this.dialogVisible = false
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    },
    checkConfirmPassword(rule, value, callback) {
      if (value !== this.formData.new_password) {
        return callback(new Error('两次输入的密码不一致'))
      } else {
        return callback()
      }
    },
    getAdminList() {
      adminList('?page' + this.form.page).then(res => {
        if (res.code === 10000) {
          res.data.data.forEach(item => {
            item.last_time_text = item.last_time || '无'
          })
          this.tableData = res.data.data
          this.total = res.data.total
        } else {
          this.$message.error(res.message)
        }
      })
    },
    openDialog(id) {
      this.dialogVisible = true
      this.formData.id = id
    },
    pageChange(page) {
      this.form.page = page
      this.getAdminList()
    },
    addAccount() {},
    resetPassword(id) {
      const params = {
        id
      }
      resetAdmin(params).then(res => {
        console.log(res)
        if (res.code === 10000) {
          this.$message.success('重置成功')
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style lang="scss" scpoed>
  .container {
    padding: 20px;
    .btn {
      margin-bottom: 20px;
      .btn-box {
        display: flex;
      }
    }
    .pagination {
      margin-top: 20px;
      float: right;
    }
  }
</style>